<template>
	<view class="">
		<!-- <nav-bar leftIcon="" title="充值" color="#222" backgroundColor="rgba(255,255,255,0)"
			navbarbg="rgba(255,255,255,0)">

		</nav-bar> -->
		<view class="rtop">
			<view class="t">
				<text class="icon">VIP</text>
				<text class="text">NO.{{NO}}</text>
			</view>
			<view class="bla">
				余额<text class="f">¥{{balance}}</text>
			</view>
		</view>
		<view class="rcont">
			<view class="tab u-flex">
				<view class="tab-item" :class="{'active':tabid==1}" @click="changeTab(1)">
					会员卡充值
				</view>
				<view class="tab-item" :class="{'active':tabid==2}" @click="changeTab(2)">
					充值卡充值
				</view>
			</view>
			<view class="tabitem1" v-if="tabid==1">
				<view class="t1">
					选择充值金额
				</view>
				<view class="t2 u-flex u-flex-wrap">
					<view class="item" :class="index==selectid?'active':''" v-for="(item,index) in rechargeArray"
						:key="index" @tap="changeItem(index)">
						<view class="p1">¥{{item}}</view>
						<view class="p2">享受会员价</view>
					</view>
				</view>
				<view class="t1 mt30">
					支付方式
				</view>
				<view class="paym u-flex u-flex-between u-flex-y-center">
					<view class="l u-flex u-flex-between">
						<image :src="imgUrl+'icon_wx.png'" mode="widthFix"></image>
						<text>微信支付</text>
					</view>
					<view class="r">
						<image :src="imgUrl+'selected.png'" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="tabitem2" v-if="tabid==2">
				<view class=" b1 b2 u-flex u-flex-between u-flex-y-center">
					<input class="input_code" type="number" v-model="memberCard" placeholder="请扫描/输入充值码">
					<view class="scan" @click="toScan">
						<image src="../../static/img/100.png" mode=""></image>
					</view>
				</view>
				<view class="p">
					说明：请刮开充值卡充值二维码进行充值
				</view>
				<view class="img">
					<image src="../../static/img/1.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="button" style="margin-top: 150rpx;" @click="payfor">确认充值</view>

	</view>
</template>

<script>
	import navBar from '@/components/nav-bar.vue'
	import wIcon from '@/components/w-icon.vue'
	var timer = null;
	export default {
		components: {
			wIcon,
			navBar
		},
		data() {

			return {
				tabid: 1,
				balance: "",
				memberCard: "",
				imgUrl: this.imgUrl,
				show: false,
				rechargeArray: ["200", "300", "500", "1000"],
				selectid: 0,
				NO: "",
				consumecode: "",
				bar: {
					code: '',
					color: ['#333'], // 条形码的颜色
					bgColor: '#FFFFFF', // 背景色
					width: 420, // 宽度
					height: 134 // 高度
				},
				qrcode: {
					code: '',
					size: 300, // 二维码大小
				},
			}
		},
		computed: {

		},
		beforeCreate() {

		},
		created() {

		},
		mounted() {
			this.getMyCard()
		},
		onHide() {
			clearInterval(timer)
		},
		methods: {
			toScan() {
				var self = this;
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						self.memberCard = res.result
					}
				});
			},
			changeTab(index) {
				this.tabid = index;
			},
			changeItem(index) {
				this.selectid = index;
			},

			getMyCard() {
				let p = new Promise((resolve, reject) => {
					this.$http.GetMyCard({

					}).then(res => {
						if (res.code == 0) {
							if (res.content[0] && res.content[0].cardno) {
								this.NO = res.content[0].cardno
								this.balance = res.content[0].totalmoney
								resolve();
							}
						} else {

						}
					})
				})
				return p;
			},

			GetBalance() {
				this.$http.GetMyCard({
					cardno: this.cardno,
				}).then(res => {
					if (res.code == 0) {

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			getOpenId() {
				var p = new Promise((result, reject) => {
					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							let code = loginRes.code
							console.log(loginRes)
							this.$http.wxLogin({
								code: loginRes.code,
								appid: this.wxappid,
								scene: ""
							}).then(res => {
								if (res.code == 0) {
									if (res.isBind) {

									}
									result()
								} else {
									reject()
								}
							})
						}
					});
				})
				return p;
			},
			payfor() {
				var that = this;
				if (this.tabid == 1) {

					var money = this.rechargeArray[this.selectid]
					// this.getOpenId().then((result)=>{
					this.$http.PaymentRequest({
						// chargemoney:money,
						chargemoney: "0.01",
						mobile: uni.getStorageSync("userInfo").mobile,
						operationMethod: 1,
						paytype: 4,
						billNO: this.NO
					}).then(res => {
						if (res.code == 0) {
							var payData = res.content;
							payData = JSON.parse(payData)
							uni.requestPayment({
								provider: "wxpay",
								timeStamp: payData.timeStamp.toString(),
								nonceStr: payData.nonceStr,
								package: payData.package,
								signType: payData.signType,
								paySign: payData.paySign,
								success: res => {
									uni.showToast({
										title: "成功充值" + money + '元',
										icon: "none"
									})
									timer = setInterval(() => {
										that.getMyCard();
									}, 1000)
								},
								fail: res => {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								},
								complete: res => {
									console.log(res)
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
					// })
				} else {
					if (!this.memberCard) {
						uni.showToast({
							title: '请扫描/输入充值码',
							icon: "none"
						})
						return
					}

					this.$http.ICqrcodeverify({
						qrcode: this.memberCard,
						cardno: this.NO
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						if (res.code == 0) {
							this.memberCard = ''
						} else {

						}
					})
				}
			}
		},
		beforeDestroy() {

		}
	}
</script>

<style lang="scss" scoped>
	.rtop {
		width: 710rpx;
		margin: 34rpx auto 20rpx;
		background: #fff;
		border-radius: 10rpx;
		height: 180rpx;
		padding: 24rpx 20rpx;

		.icon {
			width: 44rpx;
			height: 31rpx;
			background: #BFB39B;
			border-radius: 4rpx;
			line-height: 31rpx;
			text-align: center;
			font-size: 20rpx;
			color: #fff;
		}

		.text {
			font-size: 24rpx;
			color: #666666;
			line-height: 45rpx;
			margin-left: 20rpx;
		}

		.bla {
			margin-top: 40rpx;
			color: #666666;
			font-size: 24rpx;

			text {
				font-size: 44rpx;
				color: #222;
				padding-left: 6rpx;
			}
		}
	}

	.rcont {
		width: 710rpx;
		padding: 30rpx 20rpx;
		background: #fff;
		margin: 0 auto;

		.tab {
			width: 610rpx;
			height: 60rpx;
			background: #BFB39B;
			border: 1px solid #BFB39B;
			border-radius: 30rpx;
			margin: 0 auto 20rpx;

			.tab-item {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 30rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #fff;
			}

			.tab-item.active {
				background: #fff;
				color: #BFB39B;
			}
		}

		.t1 {
			font-size: 28rpx;
			color: #888;
			line-height: 70rpx;
		}

		.t2 {
			padding-left: 15rpx;
			padding-top: 10rpx;

			.item {
				width: 200rpx;
				height: 154rpx;
				margin-right: 16rpx;
				background: #fff;
				border-radius: 16px;
				border: 2px solid #CCCCCC;
				color: #333;
				font-size: 48rpx;
				border: 1px solid rgba(204, 204, 204, 0.5);
				margin-bottom: 20rpx;
				text-align: center;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.p1 {
					line-height: 62rpx;
					padding-top: 30rpx;
				}

				.p2 {
					font-size: 28rpx;

				}
			}

			.active {
				color: #BFB39B;
			}

			.gray {
				color: #CCCCCC;
			}
		}

		.mt30 {
			margin-top: 30rpx;
		}

		.paym {
			.l {
				font-size: 28rpx;
				color: #222;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.r {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.f_b {
			position: absolute;
			bottom: 50rpx;
			left: 60rpx;
		}

		.tabitem2 {
			.b1 {
				margin: 0 auto;
				width: 658rpx;
				height: 120rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 1px solid rgba(204, 204, 204, 0.13);
				padding: 0 30rpx;

				.input_code {
					line-height: 120rpx;
					font-size: 28rpx;
					width: 434rpx;
				}

				.dynacode {
					width: 222rpx;
					text-align: center;
					font-size: 24rpx;
					color: #BFB49B;
					height: 120rpx;
					line-height: 120rpx;
				}
			}

			.b2 {
				margin-top: 40rpx;
				border-radius: 10rpx 10rpx 0 0;

				.scan {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.p {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #999;
				}


			}
		}
	}

	.img {
		width: 100%;
		height: 300rpx;
		margin: 40rpx auto;

		image {
			width: 100%;
		}
	}

	.recharge {
		height: 750rpx;
		padding: 0 30rpx;
		background: #fff;

		.head {
			text-align: center;
			font-size: 40rpx;
			columns: #222;
			line-height: 80rpx;
		}

		.t1 {
			font-size: 32rpx;
			color: #888;
			line-height: 70rpx;
		}

		.t2 {
			.item {
				width: 160rpx;
				height: 140rpx;
				margin-right: 16rpx;
				background: #fff;
				box-shadow: 0px -10rpx 16rpx 0px rgba(204, 204, 204, 0.29);
				border-radius: 20rpx;
				color: #222;
				text-align: center;
				line-height: 140rpx;
				border: 1px solid rgba(204, 204, 204, 0.5);
				margin-bottom: 20rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}
			}

			.active {
				background: #222;
				color: #fff;
			}
		}

		.mt30 {
			margin-top: 30rpx;
		}

		.paym {
			.l {
				font-size: 28rpx;
				color: #222;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.r {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.f_b {
			position: absolute;
			bottom: 50rpx;
			left: 60rpx;
		}
	}
</style>
